<template>
	<view class="index" >	
	
		<view class="main-container">
			<scroll-view  style="height: 100%;"
				 scroll-y>
					<view class="itemBox"  >
						<view class="imgInfo">
							<view class="imgs">
								<view class="imgItem">
									<image :src="info.zpImg"></image>
									<view class="imgLabel">抓拍图片</view>
								</view>
								<span>对比</span>
								<view class="imgItem">
									<image :src="info.zjImg"></image>
									<view class="imgLabel">证件照片</view>
								</view>
							</view>
							<image :src="info.img"></image>
							<view class="scrullImg">全景图片</view>
							<view class="info">
								<view style="width: 100%;">
									<view class="infoItem">
										<view>告警原因：</view>
										<view>{{info.title}}</view>
									</view>
									<view class="infoItem">
										<view>告警地点：</view>
										<view>{{info.address}}</view>
									</view>
									<view class="infoItem">
										<view>告警时间：</view>
										<view>{{info.time}}</view>
									</view>
									<view class="infoItem">
										<view class="label">处理说明：</view>
										<view class="value">{{info.illustrate}}</view>
									</view>
								
								</view>
								<view class="hand">
									<view class="status" :class="info.status=== '0'? 'zero':'one'">{{info.status=== '0'?'未处理':'已处理'}}
									</view>
									
								</view>		
							</view>	
						</view>
					</view>
			</scroll-view>
		</view>		
	</view>
	

</template>

<script>
	import custom from '../../colorui/commonpent/custom.vue'
	
	import {
		apiUrl,
		getCache
	} from "@/utils/cache.js";
	export default {
		name: 'name',
		
		data(){
			return{
				info:{
					id:0,
					zpImg:'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
					zjImg:'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
					img:'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
					title:'非法闯入',
					address:'1号通道入口',
					time:'2023-5-25 17:15:55',
					status:'1',
					illustrate:'weoifjo 我覅威风违法未weoifjo 我覅威风违法未weoifjo 我覅威风违法未weoifjo 我覅威风违法未weoifjo 我覅威风违法未weoifjo 我覅威风违法未weoifjo 我覅威风违法未',
					typeBgColor:'0'
				},
				inputHeight:0,
				content:''
			}
		},
		components:{
			custom
		},
		computed: {
			cusHeight() {
				return this.CustomBar;
			}
		},
		
		watch:{
			content(){
				if(this.content.length>400){
					this.content=String(this.content).slice(0,100)
				}
			}
		},
		onLoad(options) {
			console.log('adfas',options);
			if(options.hasOwnProperty('id')&& options.hasOwnProperty('areaId')){
				console.log('asdfasd 详情')
				this.getDetails(options);
			}
			
		},
		onReady() {
			// var that = this;
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		//_this.phoneHeight = res.windowHeight;
			// 		//console.log("phoneHeight:" + res.windowHeight)
			// 		let view = uni.createSelectorQuery().select("#head"); //局部滑块
			// 		view.boundingClientRect(data => {
			// 			//return res.windowHeight - data.height
			// 			that.heightc = res.windowHeight - data.height - 20;
			// 		}).exec();
			// 	},
			// });
		},
		computed: {
			cusHeight() {
				console.log('sdfasd', this.CustomBar);
				//console.log('sdfasd', (uni.upx2px(this.CustomBar) / this.CustomBar) + 220);
				//let height = this.CustomBar / (uni.upx2px(this.CustomBar) / this.CustomBar) + 220;
				//console.log('sdfasd', height);
				return this.CustomBar;
			}
		},
		methods:{
			async getDetails(data){
				// let that = this;
				
				uni.request({
					url:  apiUrl+'/smartApp/hkSnapMatchAlarm/getDetail',
					data: {
						areaId:data.areaId,
						id:data.id
					},
					header: {
						'Accept': 'application/json',
						'Content-Type': 'application/json',
						'Authorization': getCache('lw-TOKEN'),
					},
					method: "GET",
					success: (response) => {
						 console.log('adfas',response.data)
						if(response.data.status === 200){
							const data = response.data.data;
							this.info = {
								id:data.id,
								zpImg:data.smallUrl,//'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
								zjImg:data.originalUrl,//'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
								img:data.bigUrl,//'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
								title:data.dataName,//'非法闯入',
								address:data.deviceName,//'1号通道入口',
								time:data.alarmTime,//'2023-5-25 17:15:55',
								status:data.alarmStatus,//,2 int
								illustrate:data.alarmExplain,//'weoifjo 我覅威风违法未weoifjo 我覅威风违法未weoifjo 我覅威风违法未weoifjo 我覅威风违法未weoifjo 我覅威风违法未weoifjo 我覅威风违法未weoifjo 我覅威风违法未',
								typeBgColor:'0'
							}	
						}
						
							
					},
					fail: (error) => {
						uni.showToast({
							title: '数据获取失败',
							duration: 1000
						})
					},
				});
				
				
				
			},
			
			
			inputBindFocus(e) {
				console.log('sdfg',e);
			           if (e.detail.height) {
						   console.log('this.inputHeight',this.inputHeight);
			               this.inputHeight = e.detail.height //这个高度就是软键盘的高度
			          }
			 },
		}
	}
</script>

<style scoped lang="scss">
	.index{
		//background-color: red;
		// height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #F9F8FA;
		z-index: -1;
	
		padding: 12px;
		.main-container{
			height: 100%;
			width: 100%;
		
			.sure{
				// position: fixed;
				// bottom: 40px;
				// left: 50%;
				// width: 220px;
				height: 34px;
				background: #0065D8;
				border-radius: 50px;
				margin-left: -110px;
				text-align: center;
				line-height: 34px;
				font-size: 14px;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				    margin: 26px 25%;
				color: #fff;
			}
			.itemBox {
				display: flex;
				// height: 623px;
				border-radius: 5px;
				justify-content: space-between;
				padding: 14px;
				
				font-size: 12px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				background-color: #fff;
				position: relative;
				
				
			
				
				
				.scrullImg{
					font-size: 14px;
					color: #666;
					padding: 14px 0;
					border-bottom: 1px solid #E8E8E8;
					text-align: center;
				}
				.imgInfo {
			
					display: flex;
					flex-direction: column;
					width: 100%;
					border-top-left-radius: 5px;
					border-top-right-radius: 5px;
					font-size: 14px;
					.imgs{
						display: flex;
						align-items: center;
						width: 100%;
						justify-content: space-between;
						span{
							color: #0065D8;
						}
						.imgItem{
						
							text-align: center;
							font-size: 14px;
							color: #666666;
							.imgLabel{
								margin: 5px 0;
							}
							image{
								    width: 128px;
								    height: 121px;
								
							}
						}
					}
					.textintro{
						margin-top: -7.5px;
						color: #666666;	 
						position: relative;
						textarea{
							width: 100%;
							border-bottom:1px solid #E8E8E8;
							letter-spacing: 1px;
						}
						.textNumber{
							position: absolute;
							bottom: 9px;
							 right: 0;
						}
					}
					.info {
						margin: 7.5px 0px;
						color: #666666;
						display: flex;
						justify-content: space-between;
						position: relative;
						.infoItem {
							color: #666;
							margin: 5.5px 0;
							display: flex;
							width: 100%;
							.label{
								width: 70px;
							}
							.value{
								flex: 1;
							}
							span {
								color: #181818;
							}
						}
						.hand {
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							position: absolute;
							right: 0;
							font-size: 12px;
							width: 76px;
									
							.status {
								width: 52px;
								height: 22px;
								border-top-left-radius: 4px;
								border-top-right-radius: 10px;
								border-bottom-left-radius: 10px;
								border-bottom-right-radius: 4px;
								position: absolute;
								top: 7.5px;
								right: 0px;
								text-align: center;
								line-height: 22px;
								color: #fff;
							}
									
							.zero {
								background-color: #FF5B5B;
							}
									
							.one {
								background-color: #3FD098;
							}
									
							.btn {
								color: #0065D8;
								border: 1px solid #0065D8;
								border-radius: 20px;
								padding: 3px 11px;
									
								position: absolute;
								bottom: 1px;
								right: 0px;
							}
						
						}
			
					}
			
					image {
					
						width: 100%;
						height: 174px;
					}
				}
			
			}
			
		}
		
		
	}
	
</style>